<template>
  <div id="printCallRecords" ref="callBosMain">
    <div class="title">
      <span class="line"></span>
      <span><i style="font-size:15px !important;" class="iconfont icon-tonghuajilu"></i>访问记录</span>
      <!-- <el-button style="float:right;margin-left:10px;margin-right:10px;margin-top:6px;color:#fff;" type="text" @click="openPrintModel"><i class="el-icon-printer"></i> {{$t('wechat.dayinSms')}}</el-button> -->
    </div>
    <div class="history_content" style="height: 100%;">
      <el-card v-for="(item, index) in tableData" :key="index" style="margin: 0 20px 10px 20px;">
        <div>
          app名称：{{ item.appname }}
        </div>
        <div>
          主机：{{ item.host }}
        </div>
        <div>
          包名称:{{ item.packageName }}
        </div>
        <div>
          代理：{{ item.proxy }}
        </div>
        <div>
          method：{{ item.method }}
        </div>
        <div>
          规则：{{ item.rule }}
        </div>
        <div>
          时间：{{ formData(item.time) }}
        </div>
        <!-- <el-form label-position="left" label-width="80px" size="mini">
          <el-form-item label="app名称" style="height: 10px;">
            {{ item.appname }}
          </el-form-item>
          <el-form-item label="主机" style="height: 10px;">
            {{ item.host }}
          </el-form-item>
          <el-form-item label="包名称" style="height: 10px;">
            {{ item.packageName }}
          </el-form-item>
          <el-form-item label="代理" style="height: 10px;">
            {{ item.proxy }}
          </el-form-item>
          <el-form-item label="method" style="height: 10px;">
            {{ item.method }}
          </el-form-item>
          <el-form-item label="规则" style="height: 10px;">
            {{ item.rule }}
          </el-form-item>
          <el-form-item label="时间" style="height: 10px;">
            {{ formData(item.time) }}
          </el-form-item>
        </el-form> -->
      </el-card>
    </div>
    <div class="block">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="offset"
        :page-sizes="[100, 200, 300, 400]" :page-size="20" layout="total, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>

  </div>
</template>
  
<script>
import print from 'print-js'
import html2canvas from "html2canvas"
import { getCallRecordsApi, searchWord } from '@/api/baseInfo/base_api'
import { parseTime } from "@/utils/index"
import { sendMarkOrderApi, getUserCallRe } from '@/api/markApi/index'
import { throttle } from 'lodash';

import ScreenShort from "js-web-screen-shot";
import { vpnHistoryApi } from "@/api/vpn/index"
// import { parseTime } from "@/utils/index"

export default {
  name: "vpnHistory",
  props: ['sendData'],
  data() {
    return {
      activeName: 'first',
      closeLoadingData: false,
      offset: 1,
      limit: 10,
      nodeoffset: 1,
      nodelimit: 10,
      show: true,
      showNode: true,
      tableData: [],
      nodeDataList: [],
      total: 0,
      nodeTotal: 0
    };
  },
  watch: {
    "$store.state.account.vpnHistory": function () {
      this.activeName = 'first';
      this.tableData = [];
      this.nodeDataList = [];
      this.offset = 1;
      this.limit = 20;
      this.total = 0;
      this.nodeTotal = 0;
      this.initHistoryFunction()
    },
  },
  created() {
    this.activeName = 'first';
    this.tableData = [];
    this.nodeDataList = [];
    this.offset = 1;
    this.limit = 20;
    this.total = 0;
    this.nodeTotal = 0;
    this.initHistoryFunction()
  },
  methods: {
    formData(date) {
      return parseTime(date)
    },
    initHistoryFunction() {
      let data = {
        proof_num: sessionStorage.getItem('proof_num'),
        apptype: this.sendData.class,
        account_id: String(this.sendData.account_id),
        offset: this.offset,
        limit: this.limit
      }
      vpnHistoryApi(data).then(res => {
        this.tableData = res.data;
        if (res.data.length > 0) {
          this.total = res.data[0].cnt;
        }
      })
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.offset = val;
      this.initHistoryFunction();
    },
  }
};
</script>
  
<style scoped>
.history_content {
  height: 84vh;
  overflow-y: auto;
}

@media screen and (min-width: 2360px) {
  .history_content {
    max-height: 79vh;

  }
}

@media screen and (min-width: 2561px) {
  .history_content {
    max-height: 64vh;

  }
}

.loadingBoxbottom {
  width: 100%;
  text-align: center;
  margin-top: 20px;
}

.callInfoB {
  height: 40px;
  width: 90%;
  border-bottom: 1px solid #f1f1f1;
  line-height: 40px;
  display: flex;
  align-items: center;
  margin: 0 auto;
  /* box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); */
}

.blackCall {
  height: 30px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #e5e5e5;
  cursor: pointer;
  margin-bottom: 10px;
}

.callRecordListItem {
  height: 60px;
  border-bottom: 1px solid #e5e5e5;
  padding: 0 10px;
  display: flex;
  align-items: center;
  cursor: pointer;
  box-shadow: 0 17px 119px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
  position: relative;
  background: #fff;
}

/* .callRecordListItem:hover{
    background: #ececec;
  } */
.badgeBox {
  width: 50px;
  height: 23px;
  border-radius: 10px;
  color: #fff;
  background: #f56c6c;
  text-align: center;
  line-height: 23px;
  font-size: 12px;
}

.title {
  width: 100%;
  height: 50px;
  background: #2b2f3a;
  margin-bottom: 10px;
  line-height: 50px;
  padding-left: 20px;
  color: #fff;
}

.line {
  width: 8px;
  height: 100%;
}

.mainContentBox {
  padding: 0 10px;
  height: 90%;
  overflow-y: auto;
  padding-bottom: 100px;
}

.mainContentBox::-webkit-scrollbar {
  width: 10px;
}

/* <!--修改 滚动条的 下面 的 样式--> */
.mainContentBox::-webkit-scrollbar-track {
  background-color: rgb(252, 252, 252);
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius: 2em;
}

/* <!--修改 滑块 --> */
.mainContentBox::-webkit-scrollbar-thumb {
  background-color: #c0c0c0;
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius: 2em;
}
</style>
  